import React from 'react'
import { connect } from 'dva';
import {
    Input,
    Tabs,
    message,
} from 'antd';

import './Add.scss';
import './Header.scss';

const TabPane = Tabs.TabPane;

@connect(({ add }) => ({
    add: add
}))
export default class Header extends React.PureComponent {

    constructor(props) {
        super(props);
        const panes = [
          { title: 'Tab 0', content: {}, key: '1'},
        ];
        this.state = {
          activeKey: panes[0].key,
          panes,
          lastActiveKey: 1
        };
      }
      componentDidMount(){
          this.setState({
              panes: this.props.add.allDataSource
          })
          //订阅
          window.PubSub.subscribe('tabTitle',this.setTabTitle);
          window.PubSub.subscribe('tabRemove',this.remove);
      }
      onChange = (activeKey) => {
        let data = this.props.getFileds()
        let panes = [...this.props.add.allDataSource]
        let num = this.state.activeKey
        let newData = {}
        panes.map((item,index)=>{
            if(item.key == num){
                item.content = data
            }
            if(item.key == activeKey){
                newData = item.content
            }
        })
        this.props.reset()
        this.props.setFields(newData)
        this.setState({ activeKey });
        this.props.dispatch({type:'add/saveAllDataSource',data: panes})
      }
    
      onEdit = (targetKey, action) => {
        this[action](targetKey);
      }
      //新建
      add = () => {
        let data = this.props.getFileds()
        let panes = [...this.props.add.allDataSource]
        let num = this.state.activeKey
        panes.map((item,index)=>{
            if(item.key == num){
                item.content = data
            }
        })
        this.props.reset()
        const activeKey = Number(this.state.lastActiveKey) + 1;
        panes.push({ title: `新建 ${activeKey}`, content: {}, key: String(activeKey) });
        this.setState({ panes, activeKey: String(activeKey),lastActiveKey: activeKey});
        this.props.dispatch({type:'add/saveAllDataSource',data: panes})
      }
      //移除
      remove = (targetKey) => {
        let length = this.state.panes.length
        if(length<=1){
            message.info('1秒后自动关闭页面~');
            setTimeout(()=>{
                window.close();
            },1000)
            return
        }
        if(!targetKey){
            var targetKey = this.state.activeKey
        }
        let newData = {}
        let activeKey = this.state.activeKey;
        let lastIndex;
        this.state.panes.forEach((pane, i) => {
          if (pane.key === targetKey) {
            lastIndex = i - 1;
          }
        });
        const panes = this.state.panes.filter(pane => pane.key !== targetKey);
        if (lastIndex >= 0 && activeKey === targetKey) {
          activeKey = panes[lastIndex].key;
          newData = panes[lastIndex].content
        }
        this.props.reset()
        this.props.setFields(newData)
        this.setState({ panes, activeKey });
        this.props.dispatch({type:'add/saveAllDataSource',data: panes})
      }
    /**
     * 设置标题值
     */
    setTabTitle=(data)=>{
        let activeKey = this.state.activeKey
        let panes = [...this.state.panes]
        panes.map((item)=>{
            if(item.key == activeKey){
                item.title = data
            }
        })
        this.props.dispatch({type:'add/saveAllDataSource',data: panes})
    }
    render() {
        return (
            <div className="header">
                <Tabs
                    onChange={this.onChange}
                    activeKey={this.state.activeKey}
                    type="card"
                    onEdit={this.onEdit}
                >
                    {this.state.panes.map(pane => <TabPane tab={pane.title} key={pane.key}></TabPane>)}
                </Tabs>
            </div>
        )
    }
}